<template>
  <view
    class="content"
    :style="{
      'padding-top': height + 'px',
    }"
  >
    <view
      :style="{
        height: statusBarHeight + 'px',
      }"
    >
    </view>
    <!-- 头部 -->
    <view
      class="head"
      :style="{
        top: statusBarHeight + 'px',
        background: isHeadBack ? 'rgba(0,0,0,0.3)' : 'rgba(0,0,0,0)',
      }"
    >
      <view class="head_left">
        <u-icon
          name="arrow-left"
          color="#EEEEEE"
          size="24"
          :bold="true"
          @click="toBack"
        ></u-icon>
      </view>
      <view class="text">牛勒明细</view>
    </view>

    <view class="box">
      <view class="date" @click="show = true">
        {{ y }}年{{ m < 10 ? "0" + m : m }}月{{ d < 10 ? "0" + d : d }}日
        <u-icon name="arrow-down" color="#666666" size="15"></u-icon>
      </view>
      <view
        class="box_scroll"
        :style="{
          height: scrollHeight + 'px',
        }"
      >
        <view class="box_item" v-for="item in 10">
          <view class="box_item_left">
            <view class="box_item_title">积分兑换人民币</view>
            <view class="box_item_time">2023年09月06日 11：53：14</view>
          </view>
          <view class="box_item_right" v-show="true">+1</view>
          <view class="box_item_right box_item_right1" v-show="false">-100</view>
        </view>
        <view class="noMall">没有更多了</view>
      </view>
    </view>

    <!-- 时间选择器 -->
    <u-datetime-picker
      :show="show"
      v-model="value"
      mode="date"
      :formatter="formatter"
      @confirm="confirm"
      @cancel="cancel"
    ></u-datetime-picker>


    <floatingBall></floatingBall>
  </view>
</template>
              
  <script>
import helper from "@/common/helper.js";
export default {
  components: {},

  data() {
    return {
      statusBarHeight: 0,
      height: 0,
      isHeadBack: false,
      scrollHeight: 0,
      show: false,
      value: Number(new Date()),
      y: "",
      m: "",
      d: "",
    };
  },
  created() {
    const statusBarHeight = uni.getSystemInfoSync(); // 获取手机状态栏高度
    const windowHeihgt = statusBarHeight.windowHeight;
    this.statusBarHeight = statusBarHeight.statusBarHeight;
    this.$nextTick(() => {
      uni
        .createSelectorQuery()
        .select(".head")
        .boundingClientRect((data) => {
          this.height = data.height;
        })
        .exec();
    });

    this.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query.select(".head").fields({
        size: true,
      });
      query.select(".date").fields({
        size: true,
      });

      query.exec((data) => {
        let sum = 0;
        data.forEach((item) => {
          sum += item.height;
        });
        this.scrollHeight = windowHeihgt - sum - 52;
      });
    });

    const today = helper.djsFull(Date.now());
    this.y = today.y;
    this.m = today.m;
    this.d = today.d;
  },

  methods: {
    toBack() {
      uni.navigateBack({
        delta: 1,
      });
    },
    formatter(type, value) {
      if (type === "year") {
        return `${value}年`;
      }
      if (type === "month") {
        return `${value}月`;
      }
      if (type === "day") {
        return `${value}日`;
      }
      return value;
    },
    confirm(value) {
      const today = helper.djsFull(value.value);
      console.log(today.m, "33333333");
      this.y = today.y;
      this.m = today.m;
      this.d = today.d;
      this.show = false;
    },
    cancel() {
      this.show = false;
    },
  },
};
</script>
              
  <style scoped lang="scss">
.content {
  background: #111111;
  box-sizing: border-box;
  // background: url("/static/images/my/pic_wdjf_bwijing.png") no-repeat;
  // background-size: 100% auto;
  // background-attachment: fixed;
  z-index: -10;
  display: flex;
  flex-direction: column;
}

.head {
  width: 100%;
  padding: 18rpx 30rpx 47rpx;
  position: fixed;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  z-index: 99;
  background: #ffffff;
  .head_left {
    position: absolute;
    left: 30rpx;
  }

  .head_right {
    position: absolute;
    right: 30rpx;
    color: #55b877;
    font-size: 30rpx;
  }

  .text {
    font-size: 36rpx;
    font-family: PingFang SC-Bold, PingFang SC;
    font-weight: 400;
    color: #eeeeee;
  }
}
.box {
  padding: 30rpx 60rpx;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  .date {
    width: 319rpx;
    height: 72rpx;
    border-radius: 36rpx;
    border: 1rpx solid #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #ffffff;
    .u-icon {
      margin-left: 20rpx;
      position: relative;
      top: 3rpx;
    }
  }
  .box_scroll {
    box-sizing: border-box;
    overflow-y: scroll;
    margin-top: 32rpx;
    .box_item {
      background: #272727;
      border-radius: 24rpx;
      margin-bottom: 32rpx;
      padding: 32rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .box_item_left {
        flex: 1;
        .box_item_title {
          font-size: 30rpx;
          color: #ffffff;
        }

        .box_item_time {
          margin-top: 16rpx;
          color: #666666;
          font-size: 26rpx;
        }
      }
      .box_item_right{
        color: #55B877;
      }
      .box_item_right1{
        color: #EE6060;

      }
    }
    .noMall {
      font-size: 26rpx;
      color: #888888;
      margin: 32rpx 0;
      text-align: center;
    }
  }
}
</style>